<template>
<view>
	<view class="header">
		<view class="left" v-if="address">
			<view>收件人:<text class="title">{{address.name}}</text></view>
			<view>联系电话:<text class="title">{{address.phone}}</text></view>
			<view>寄送地址:<text class="title">{{address.city}}{{address.address}}</text></view>
		</view>
		<view class="left" v-else @click="goAddress()">
			<view class="address">请选择收货地址</view>
		</view>
		<view class="right" @click="goAddress()">
			<image src="/static/img/right.png"></image>
		</view>
	</view>
	<view class="goods">
		<view class="cinfo" v-for="(item,index) in list" :key="index">
			<image v-if="item.img" :src="imgUrl+item.img"></image>
			<view class="carttitle">
				<view>{{item.name}}</view>
				<view v-if="str == 24" class="price">积分:{{item.price}}</view>
				<view v-else class="price">价格:{{item.price}}</view>
				<view class="num">购买数量:
					<view class="plus cartnum" @click="plus(index,1)">+</view>
					<view class="cartnum">{{item.num}}</view>
					<view class="cartnum" @click="plus(index,2)">-</view>
					</view>
			</view>
		</view>
	</view>
	<view class="scoreType" v-if="scoreShow" @click="formShow = false">
		<checkbox-group  @change="scoreTrue = !scoreTrue">
			<label class="checkbox">
			<checkbox value="1" color="#FFA200" />
			你有积分{{integral}},是否使用(优先使用积分)
			</label>
		</checkbox-group>
	</view>
	<view class="scoreType" v-else style="color:#b30000;">
		您暂未通过人工审核,暂时不可使用积分兑换!!!
	</view>
	<view class="footer">
		<view v-if="str == 24">共计:{{money}}积分</view>
		<view v-else>共计:{{money}}元</view>
		<view @click="payquery">支付</view>
	</view>
	
	
	<view class="orderForm" v-if="formShow" @click="formShow = false">
		<view class="payclass" @click.stop="">
			<view class="pop_top">
				<view class="po_top_1">订单确认</view>
				<image @click="formShow = false" src="/static/img/close.png"></image>
			</view>
			<view class="tr">
				<view class="th" style="font-size:14px;">消费满500元包邮,快递费不可积分抵扣</view>
			</view>
			<view class="tr">
				<view class="th2">商品总价</view>
				<view v-if="str == 24" class="th3">{{money}}积分</view>
				<view v-else class="th3">{{money}}元</view>
			</view>
			<view class="tr" v-if="scoreTrue">
				<view class="th2">积分抵扣</view>
				<view class="th3">{{payScore}}元</view>
			</view>
			<view class="tr" v-if="money < 500 && str !== 24">
				<view class="th2">快递费</view>
				<view class="th3">{{fee}}元</view>
			</view>
			<view class="tr">
				<view class="th2">还需支付</view>
				<view class="th3">{{payMoney}}元</view>
			</view>
			
			<button v-if="payTrue" @click="pay" class="pboutom">支付</button>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			address:{},
			addid:0,
			money:0,
			str:'',
			scoreShow:true,
			status:0,
			integral:0,
			scoreTrue:false,
			imgUrl:this.url,
			list:[],
			payScore:0,
			payMoney:0,
			fee:12.00,
			payTrue:true,
			formShow:false
		}
	},
	onLoad:function(e){
		uni.showLoading({  
		    title: '加载中'  
		});
		this.getAddress()
		this.str = e.str
		this.getInfo(e.str,e.num)
		this.getUserScore()
	},
	methods: {
		getUserScore:function(){
			var that = this;
			var data = {uid:uni.getStorageSync('uid')}
			request({
				url: 'member/info',
				method: 'get',
				data:data,
				success: (res) => {
					if(res.data.data.status !== 3){
						that.scoreShow = false
					}
					that.integral = res.data.data.integral
					that.status = res.data.data.status
				},
			})
		},
		getAddress:function(){
			var that = this;
			var data = {uid:uni.getStorageSync('uid')}
			request({
				url: 'address/info',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.address = res.data.data
						that.addid = res.data.data.id
					}else{
						that.address = false
					}
					//uni.hideLoading();
				}
			})
		},
		getInfo:function(id,num){
			var data = {'id':id,'num':num}
			var that = this
			request({
				url: 'score/orderAll',
				method: 'get',
				data:data,
				success: (res) => {
					var list = res.data.data
					var money = 0;
					for(var x in list){
					    money += list[x]['price'] * list[x]['num']
					}
					that.list = list
					that.money = money
			    },
			})
		},
		payquery:function(){
			this.fee = 12
			if(this.str == 24){
				if(parseFloat(this.money) > parseFloat(this.integral)){
					uni.showToast({
						title:'积分不足!',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
				this.fee = 0
			}else{
				if(this.money >= 500){
					this.fee = 0
				}
			}
			if(!this.address){
				uni.showToast({
					title:'请选择收货地址!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(this.scoreTrue){
				//使用积分抵扣
				if(parseFloat(this.money) > parseFloat(this.integral)){
					//积分大于支付的金额  完全抵扣
					this.payScore = this.integral
					this.payMoney = this.money - this.integral
				}else{
					this.payScore = this.money
					this.payMoney = 0
				}
			}else{
				this.payMoney = this.money
			}
			this.payMoney = parseFloat(this.payMoney) + parseFloat(this.fee);
			this.payMoney = this.payMoney.toFixed(2);
			this.formShow = true
			//this.$refs.popup.open('center')
		},
		close:function(){
			this.$refs.popup.close()
		},
		plus:function(index,key){
			if(key == 1){
				this.list[index].num ++
				this.money = parseFloat(this.money) + parseFloat(this.list[index]['price']);
				this.money = this.money.toFixed(2);
			}else{
				if(this.list[index].num == 1){
					uni.showToast({
						title:'数量不能小于1',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
				this.list[index].num --
				this.money = parseFloat(this.money) - parseFloat(this.list[index]['price']);
				this.money = this.money.toFixed(2);
			}
		},
		pay:function(){
			this.payTrue = false
			uni.showToast({
				title:'暂未接入',
				icon: "none", 
				position:'bottom',
			});
			return;
		},
		goAddress:function(){
			console.log(12324)
			uni.navigateTo({
				url:'./address'
			})
		}
	}
}
</script>
<style>
.header {
    width: 100%;
    padding:15rpx;
    display:flex;
    justify-content: row;
    align-items: center;
    justify-content: center;
	border-bottom: 1rpx solid #e6e6e6;
}
.left{
	width:85%;
	padding-left:20rpx;
	font-size: 15px;
}
.right{width:15%;}
.right image{width:50rpx;height:50rpx;}
.title{
	font-size:14px;
	margin-left:10rpx;
}
.left view{
	margin-top:10rpx;
}
.address{
	font-weight: bold;
	font-size:16px;
}
.goods{
	display: flex;
    width: 100%;
    background:#fff;
    flex-direction: column;
	padding:15rpx;
}
.cinfo{
	width:100%;display: flex;
	justify-content: row;
	height:230rpx;
	border-bottom: 3rpx solid #e6e6e6;
}
.cinfo image{width:200rpx;height:200rpx;}
.carttitle{
	padding:15rpx;
	font-size:14px;
	width:75%;
	display: flex;flex-direction: column;
}
.price{color:#cc0000;margin-top:10rpx;}
.num{
	margin-top:10rpx;
	width:100%;display: flex;
	flex-direction: row;
	align-items:center;
}
.cartnum{
	width:80rpx;height:50rpx;
	line-height:50rpx;border:1px solid #e6e6e6;
	text-align:center;
}
.plus{margin-left:25rpx;}
.scoreType{
	width:100%;
	height:60rpx;line-height: 60rpx;
	padding-left:20rpx;
	font-size:14px;
}
.footer{
    display: flex;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    height:100rpx;
    border-top: 3px solid #e6e6e6;
}
.footer view{width:50%;display: flex;justify-content: center;align-items: center;}
.footer :nth-child(1){background:#fff}
.footer :nth-child(2){background:#FF7800;color:#FFFFFF}
.payclass{
	width:600rpx;
	height:600rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}
.pop_top{
	display: flex;
	height:80rpx;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.pop_top image{
	width:50rpx;
	height:50rpx;
}
.po_top_1{
	width:70%;
	font-weight: bold;
	font-size: 17px;
}
.tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 70rpx;
    align-items: center;
    border-bottom:1px dashed #cccccc;
   }
.th1{width:100%;font-size:16px;font-weight:bold;}
.th2{
	width: 30%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.th3 {
	width: 70%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.pboutom{
	width:50%;margin-top:20px;
	height:30px;line-height:30px;
	background: #44b549;
	color:#FFFFFF;
	border-radius: 30rpx;
}
.orderForm{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.5)
}
</style>